<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>任务列表</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            margin: 40px auto;
            max-width: 900px;
            padding: 0 20px;
            color: #333;
        }
        h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        a.add-task {
            display: inline-block;
            margin-bottom: 15px;
            padding: 8px 14px;
            background-color: #27ae60;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        a.add-task:hover {
            background-color: #219150;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 0 12px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #2980b9;
            color: white;
            font-weight: 600;
        }
        tr:hover {
            background-color: #f1f8ff;
        }
        td a {
            margin-right: 10px;
            text-decoration: none;
            color: #2980b9;
            font-weight: 500;
        }
        td a:hover {
            text-decoration: underline;
            color: #1c5980;
        }
        td a.delete {
            color: #e74c3c;
        }
        td a.delete:hover {
            color: #b63627;
        }
    </style>
</head>
<body>
<h2>定时任务列表</h2>
<a href="/task/new" class="add-task">➕ 添加新任务</a>
<table>
    <thead>
    <tr>
        <th>名称</th>
        <th>URL</th>
        <th>方法</th>
        <th>间隔(s)</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="task : ${tasks}">
        <td th:text="${task.name}"></td>
        <td th:text="${task.url}"></td>
        <td th:text="${task.method}"></td>
        <td th:text="${task.intervalSeconds}"></td>
        <td th:text="${task.active ? '运行中' : '已停止'}"></td>
        <td>
            <a th:href="@{'/task/edit/' + ${task.id}}">编辑</a>
            <a th:href="@{'/task/delete/' + ${task.id}}" class="delete" onclick="return confirm('确认删除？')">删除</a>
            <a th:href="@{'/task/toggle/' + ${task.id}}">
                [[${task.active} ? '停止' : '启动']]
            </a>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
